import React, { Component } from 'react';
import { withRouter} from 'react-router-dom';
import {observer,inject} from 'mobx-react';

import PageNav from '../../components/PageNav';

@withRouter
@inject('obs','newobs')
@observer
class View extends Component{
    constructor(props){
        super(props)
        this.state = {
            loading:true,
            listData:[],
            pageCfg:{
                page_number:'1',
                page_size:'10'
            },
            pageConfig:{
                currentPage:sessionStorage.getItem('currentPage')||1,
                totalPage:'1'
            }
        }
        this.ajaxPage = this.ajaxPage.bind(this);
    }
    newobs = this.props.newobs
    ajaxPage(currentPage){
        const { getApi } = this.newobs;
        const {pageCfg} = this.state;
        pageCfg.page_number = currentPage.toString();
        getApi('/home/mediareports',pageCfg,{}).then((res)=>{
            if(res.data.code==200){
                this.setState({
                    loading:false,
                    listData:res.data.data,
                    pageConfig:{
                        currentPage:currentPage,
                        //总页面 /每页的条数
                        totalPage:Math.ceil(res.data.total/pageCfg.page_size)
                    }
                })
            }
        })
    }

    _currencyList(item){
        const list = item.map((val)=>(
            <li key={val.id} >
                <a href={val.jump_url}>{val.main_title}</a>
                <span>{val.source}</span>
                <span>{val.sourceDate}</span>
            </li>
        ))
        return list;
    }

    loadingFn(){
        if(this.state.loading){
            return <div className="loading_box"><div className="loading"></div></div>
        }else {
            // return this.state.listData.length!==0?<ul className="ul_list">{this._currencyList(this.state.listData)}</ul>:<div className="no_result">小主，~什么都没有呀！</div>
            if(this.state.listData.length!==0){
                return <ul className="ul_list">{this._currencyList(this.state.listData)}</ul>
            }else {
                return <div className="no_result">小主，~什么都没有呀！</div>
            }
        }
    }
    componentDidMount(){
        this.ajaxPage(this.state.pageConfig.currentPage);
    }
    render(){
        const pageCfg = {
            pageConfig:this.state.pageConfig,
            getCurrentPage:this.ajaxPage
        }
        return(
            <React.Fragment>
                <div>这是ajax页面</div>
                {this.loadingFn()}
                {
                    this.state.listData.length!==0 ? <PageNav {...pageCfg}/> : ''
                }
            </React.Fragment>
        )
    }
}
export default View;
